import React from 'react';
import { Carousel } from 'antd-mobile';

interface props {
  banner: { url: string }[];
}

export default function(props: props) {
  return (
    <Carousel
      className="banner"
      infinite={true}
      autoplay={true}
      autoplayInterval={1500}
      frameOverflow="visible"
    >
      <div className="swiper-wrapper">
        {props?.banner?.map(item => (
          <div className="swiper-slide" key={item.toString()}>
            <img alt="banner" src={item.url} />
          </div>
        ))}
      </div>
    </Carousel>
  );
}
